<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.41">
    <style>
      :root {
        --c-bg: #fff;
      }
      html.dark {
        --c-bg: #22272e;
      }
      html, body {
        background-color: var(--c-bg);
      }
    </style>
    <script>
      const userMode = localStorage.getItem('vuepress-color-scheme');
			const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
				document.documentElement.classList.toggle('dark', true);
			}
    </script>
    <link rel="icon" href="/img/m3-favicon.ico"><title>Chips 纸片 | Material You</title><meta name="description" content="A material you components library">
    <link rel="modulepreload" href="/assets/app.e276f379.js"><link rel="modulepreload" href="/assets/chips.html.6a8caa7a.js"><link rel="modulepreload" href="/assets/chips.html.23c0ec20.js"><link rel="prefetch" href="/assets/index.html.5ec085b8.js"><link rel="prefetch" href="/assets/index.html.faba272a.js"><link rel="prefetch" href="/assets/button.html.9a157bdb.js"><link rel="prefetch" href="/assets/card.html.90270275.js"><link rel="prefetch" href="/assets/color.html.24bf07b5.js"><link rel="prefetch" href="/assets/elevation.html.6d0dc9e8.js"><link rel="prefetch" href="/assets/extended-FAB.html.ae055c31.js"><link rel="prefetch" href="/assets/FAB.html.9703ad9f.js"><link rel="prefetch" href="/assets/icon-button.html.f9979ea3.js"><link rel="prefetch" href="/assets/icon.html.558fb522.js"><link rel="prefetch" href="/assets/ripple.html.cce83c60.js"><link rel="prefetch" href="/assets/space.html.78b6814e.js"><link rel="prefetch" href="/assets/typescale.html.da01ad90.js"><link rel="prefetch" href="/assets/404.html.93146c89.js"><link rel="prefetch" href="/assets/index.html.401cf6b1.js"><link rel="prefetch" href="/assets/index.html.7fc92e7f.js"><link rel="prefetch" href="/assets/button.html.2a02a5c9.js"><link rel="prefetch" href="/assets/card.html.3c470ede.js"><link rel="prefetch" href="/assets/color.html.b31992de.js"><link rel="prefetch" href="/assets/elevation.html.e09a904f.js"><link rel="prefetch" href="/assets/extended-FAB.html.f19f4755.js"><link rel="prefetch" href="/assets/FAB.html.0a0f59fd.js"><link rel="prefetch" href="/assets/icon-button.html.59b0be9b.js"><link rel="prefetch" href="/assets/icon.html.bc738a56.js"><link rel="prefetch" href="/assets/ripple.html.f2400654.js"><link rel="prefetch" href="/assets/space.html.a5708cbb.js"><link rel="prefetch" href="/assets/typescale.html.3bfe247e.js"><link rel="prefetch" href="/assets/404.html.3f3b716a.js"><link rel="prefetch" href="/assets/404.bdfdbf29.js"><link rel="prefetch" href="/assets/Layout.f4106bf1.js">
    <link rel="stylesheet" href="/assets/style.d49c7a60.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/img/m3-favicon.ico" alt="Material You"><span class="site-name can-hide">Material You</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a class="external-link" href="https://github.com/Daydreamer-riri/MaterialYouUI" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!----></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a class="external-link" href="https://github.com/Daydreamer-riri/MaterialYouUI" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">快速开始 <!----></p><!--[--><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="get start"><!--[--><!--]--> get start <!--[--><!--]--></a><!----></li><!--]--></ul><!--]--></li><li><p tabindex="0" class="sidebar-item sidebar-heading">Styles <!----></p><!--[--><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/docs/color.html" class="sidebar-item" aria-label="Color 色彩"><!--[--><!--]--> Color 色彩 <!--[--><!--]--></a><!----></li><li><a href="/guide/docs/typescale.html" class="sidebar-item" aria-label="Typography 字体"><!--[--><!--]--> Typography 字体 <!--[--><!--]--></a><!----></li><li><a href="/guide/docs/elevation.html" class="sidebar-item" aria-label="Elevation 海拔"><!--[--><!--]--> Elevation 海拔 <!--[--><!--]--></a><!----></li><!--]--></ul><!--]--></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">组件 <!----></p><!--[--><ul style="" class="sidebar-item-children"><!--[--><li><p tabindex="0" class="sidebar-item">基础 <!----></p><!----></li><li><a href="/guide/docs/button.html" class="sidebar-item" aria-label="Common buttons 通用按钮"><!--[--><!--]--> Common buttons 通用按钮 <!--[--><!--]--></a><!----></li><li><a href="/guide/docs/icon.html" class="sidebar-item" aria-label="Icon 图标"><!--[--><!--]--> Icon 图标 <!--[--><!--]--></a><!----></li><li><a href="/guide/docs/icon-button.html" class="sidebar-item" aria-label="Icon button 图标按钮"><!--[--><!--]--> Icon button 图标按钮 <!--[--><!--]--></a><!----></li><li><a href="/guide/docs/FAB.html" class="sidebar-item" aria-label="Floating action buttons (FAB)"><!--[--><!--]--> Floating action buttons (FAB) <!--[--><!--]--></a><!----></li><li><a href="/guide/docs/extended-FAB.html" class="sidebar-item" aria-label="Extended FAB"><!--[--><!--]--> Extended FAB <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/docs/chips.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="Chips 纸片"><!--[--><!--]--> Chips 纸片 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item">布局 <!----></p><!----></li><li><a href="/guide/docs/space.html" class="sidebar-item" aria-label="Space 间距"><!--[--><!--]--> Space 间距 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item">展示 <!----></p><!----></li><li><a href="/guide/docs/card.html" class="sidebar-item" aria-label="Card 卡片"><!--[--><!--]--> Card 卡片 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item">指令 <!----></p><!----></li><li><a href="/guide/docs/ripple.html" class="sidebar-item" aria-label="Ripple 涟漪指令"><!--[--><!--]--> Ripple 涟漪指令 <!--[--><!--]--></a><!----></li><!--]--></ul><!--]--></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="chips-纸片" tabindex="-1"><a class="header-anchor" href="#chips-纸片" aria-hidden="true">#</a> Chips 纸片</h1><p>纸片帮助人们输入信息、进行选择、过滤内容或触发动作。芯片可以在同一区域显示多个交互元素，比如可选择的电影时间列表，或一系列电子邮件联系人。</p><img src="/img/chip/head.png" style="display:block;border-radius:13px;"><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h2><p>Chips 有四种类型：assist, filter, input 和 suggestion。</p><!----><ol><li><a href="#assist-chips">Assist chip</a></li><li><a href="#filter-chips">Filter chip</a></li><li><a href="#input-chips">Input chip</a></li><li><a href="#suggestion-chips">Suggestion chip</a></li></ol><blockquote><p>Chips 应该作为一组多个交互元素动态出现。</p></blockquote><p>在模板中：</p><div class="language-html ext-html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-chip</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>event<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Assist<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-chip</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-chip</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:modelValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Filter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-chip</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-chip</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input<span class="token punctuation">&quot;</span></span> <span class="token attr-name">closable</span><span class="token punctuation">&gt;</span></span>Input<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-chip</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-chip</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>suggestion<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Suggestion<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-chip</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><h3 id="assist-chips" tabindex="-1"><a class="header-anchor" href="#assist-chips" aria-hidden="true">#</a> Assist chips</h3><p>Assist Chips 表示可以跨越多个应用程序的智能或自动化操作，例如从主屏幕打开日历事件。Assist Chips 的功能就像用户要求助手完成操作一样。它们应该在UI中动态的根据上下文出现。</p><p>Assist Chips 的替代方法是按钮，应持续稳定地显示。</p><!----><h5 id="使用方式" tabindex="-1"><a class="header-anchor" href="#使用方式" aria-hidden="true">#</a> 使用方式</h5><p><code>type</code>属性值为<code>assist</code>，可通过<code>icon</code>属性设置图标。也可通过<code>left</code>插槽写入图标，实现切换图标等效果。可以通过<code>@click</code>为其添加点击事件。</p><!----><p>在代码中：</p><div class="language-html ext-html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-chip</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handle<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#left</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>favorite<span class="token punctuation">&quot;</span></span> 
                        <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>18<span class="token punctuation">&quot;</span></span> 
                        <span class="token attr-name">:fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isFill<span class="token punctuation">&quot;</span></span> 
                        <span class="token attr-name">transition</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>50<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-icon</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
            {{ text }}
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-chip</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span>

<span class="token keyword">const</span> textSave <span class="token operator">=</span> <span class="token string">&#39;Save to favorites&#39;</span>
<span class="token keyword">const</span> textSaved <span class="token operator">=</span> <span class="token string">&#39;Saved to favorites&#39;</span>

<span class="token keyword">const</span> isFill <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span>textSave<span class="token punctuation">)</span>

<span class="token keyword">const</span> <span class="token function-variable function">handle</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>isFill<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        isFill<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span>
        text<span class="token punctuation">.</span>value <span class="token operator">=</span> textSave
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        isFill<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span>
        text<span class="token punctuation">.</span>value <span class="token operator">=</span> textSaved
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><h3 id="filter-chips" tabindex="-1"><a class="header-anchor" href="#filter-chips" aria-hidden="true">#</a> Filter chips</h3><p>Filter chips 使用标签或描述性词来过滤内容。它们可以是切换按钮或复选框的好替代方法。</p><h5 id="使用方式-1" tabindex="-1"><a class="header-anchor" href="#使用方式-1" aria-hidden="true">#</a> 使用方式</h5><p>通过<code>v-model</code>绑定变量来获取单个 filter chip 的选中状态。</p><!----><p>在代码中：</p><div class="language-html ext-html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-chip</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>model<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span> Filter <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-chip</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
        Filter chip 的选中状态是：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>{{ model }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span>

<span class="token keyword">const</span> model <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h5 id="使用chipgroup" tabindex="-1"><a class="header-anchor" href="#使用chipgroup" aria-hidden="true">#</a> 使用ChipGroup</h5><p>通过使用<code>m-chip-group</code>包裹 chips，实现多选的效果。对<code>m-chip-group</code>添加<code>v-model</code>来获取所有 chips 的选中状态。</p><blockquote><p>必须为 chips 添加<code>checked-value</code>来标识不同的 chip</p></blockquote><!----><p>在代码中：</p><div class="language-html ext-html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-chip-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>model<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-chip</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked-value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Docs<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Docs<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-chip</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-chip</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked-value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Slides<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Slides<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-chip</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-chip</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked-value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Sheets<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Sheets<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-chip</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-chip</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked-value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Images<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Images<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-chip</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-chip-group</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
        Filter chip group 的选中状态是：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>{{ model }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span>

<span class="token keyword">const</span> model <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h5 id="单选-chipgroup" tabindex="-1"><a class="header-anchor" href="#单选-chipgroup" aria-hidden="true">#</a> 单选 ChipGroup</h5><p>通过设置 ChipGroup 的<code>single-selection</code>属性，可以保持选中 Chip 唯一。这为单选按钮、单选菜单提供了替代方案。</p><!----><p>在代码中：</p><div class="language-html ext-html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>screen<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-space</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>column<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[12, 0]<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title-medium<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Select Type<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-chip-group</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>model<span class="token punctuation">&quot;</span></span> <span class="token attr-name">single-selection</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-chip</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked-value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ES<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Extra Soft<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-chip</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-chip</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked-value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>S<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Soft<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-chip</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-chip</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked-value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>M<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-chip</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-chip</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>filter<span class="token punctuation">&quot;</span></span> <span class="token attr-name">checked-value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>H<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Hard<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-chip</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-chip-group</span><span class="token punctuation">&gt;</span></span>
                <span class="token comment">&lt;!-- 占位 --&gt;</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>m-button</span> <span class="token attr-name">long</span><span class="token punctuation">&gt;</span></span>Add to cart<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-button</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>m-space</span><span class="token punctuation">&gt;</span></span>
            <span class="token comment">&lt;!-- 占位 --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>spacer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bar<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
        Filter chip group 的选中状态是：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">&gt;</span></span>{{ model }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span>

<span class="token keyword">const</span> model <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;ES&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="input-chips" tabindex="-1"><a class="header-anchor" href="#input-chips" aria-hidden="true">#</a> Input chips</h3><h3 id="suggestion-chips" tabindex="-1"><a class="header-anchor" href="#suggestion-chips" aria-hidden="true">#</a> Suggestion chips</h3><h3 id="group" tabindex="-1"><a class="header-anchor" href="#group" aria-hidden="true">#</a> group</h3><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/Daydreamer-riri/MaterialYouUI/edit/main/guide/docs/chips.md" rel="noopener noreferrer" target="_blank" aria-label="Edit this page"><!--[--><!--]--> Edit this page <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">Last Updated: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: daydreamerriri@outlook.com">riri</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/guide/docs/extended-FAB.html" class="" aria-label="Extended FAB"><!--[--><!--]--> Extended FAB <!--[--><!--]--></a></span><!----></p></nav><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
    <script type="module" src="/assets/app.e276f379.js" defer></script>
  </body>
</html>
